<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{

				background-color: #1d1f20;

				color: #ffffff;

			}
			.container {
				height: 300px;
				width: 300px;
				position: absolute;
				top: 200px;	
			}
			.person {
				position: absolute;
				height: 75px;
				width: 0;
				color: #fff;
				left: 0px;
				top: 0px;
				transform-origin: 50% 50% 0px;
				animation: sprint 1s infinite ease-in;
			}
			.head{
				content: "";
				width: 70px;
				height: 70px;
				border: 5px solid white;
				border-radius: 50%;
				position: absolute;
				top: 40px;
				left: 50px;
				z-index: 99;
				animation: bob 0.1s infinite ease-in;
			}
			.head:before{
				content: "";
				width: 70px;
				height: 20px;
				background-color: white;
				border-radius: 40%;
				position: absolute;
				top: -10px;
				left: 0px;

			}
			.head:after{
				content: "";
				width: 50px;
				height: 20px;
				background-color: white;
				border-radius: 40%;
				position: absolute;
				top: -20px;
				left: 10px;

			}
			.torso{
				content: "";
				width: 5px;
				height: 90px;
				background-color: white;
				position: absolute;
				top: 120px;
				left: 85px;
				z-index: 10;
			}
		
			.part_arm_one{
				content: "";
				width: 60px;
				height: 60px;
				background-color: white;
				position: absolute;
				left: 85px;
				top: 120px;
				z-index: 1;
				animation: pump1 0.5s infinite ease-in;
			}
			.part_arm_one:after{
				content: "";
				width: 60px;
				height: 60px;
				background-color: #1d1f20;
				position: absolute;
				left: 5px;
				top: -5px;
				z-index: 1;
			}
			.part_arm_two{
				content: "";
				width: 60px;
				height: 60px;
				background-color: white;
				position: absolute;
				left: 85px;
				top: 120px;
				z-index: 2;
				animation: pump 0.5s infinite ease-in;
			}
			.part_arm_two:after{
				content: "";
				width: 60px;
				height: 60px;
				background-color: #1d1f20;
				position: absolute;
				left: 5px;
				top: -5px;
				z-index: 1;
			}
			.part_leg_one{
				content: "";
				width: 60px;
				height: 60px;
				background-color: white;
				position: absolute;
				left: 90px;
				top: 205px;
				z-index: 90;
				animation: run1 0.1s infinite;
			}
			.part_leg_one:after{
				content: "";
				width: 60px;
				height: 60px;
				background-color: #1d1f20;
				position: absolute;
				left: -5px;
				top: 5px;
				/*z-index: 30;*/
			}
			.part_leg_two{
				content: "";
				width: 60px;
				height: 60px;
				background-color: white;
				position: absolute;
				left: 90px;
				top: 205px;
				z-index: 20;
				animation: run2 0.1s infinite;
			}
			.part_leg_two:after{
				content: "";
				width: 60px;
				height: 60px;
				background-color: #1d1f20;
				position: absolute;
				left: -5px;
				top: 5px;
				/*z-index: 90;*/
				
			}
			@keyframes sprint {
				0% {
					transform-origin: 50% 50% 0px;
					transform: translate(0px, 0px);
				}
				100% {
					transform: translate(0px, 0px);
					transform-origin: 50% 50% 0px;
					transform: translate(2000px, 0px);
				}
			}
			@keyframes bob {
				0% {
					transform: rotate3d(0, 0, 1, 50deg);
				}
				25% {
					transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);
				}
				50% {
					transform: rotate3d(0, 0, 1, 5deg);
				}
				75% {
					transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);
				}
				100% {
					transform: rotate3d(0, 0, 1, 20deg) skew(-15deg, 0deg);
				}
			}
			@keyframes pump{
				0% {
				transform: rotate(-30deg);
			transform-origin: left top;
				}
				100% {
						transform: rotate(-80deg);
			transform-origin: left top;	
				}
			
			}
			@keyframes pump1{
				0% {
				transform: rotate(30deg);
			transform-origin: left top;
				}
				100% {
						transform: rotate(80deg);
			transform-origin: left top;	
				}
			
			}
			@keyframes run1{
				0% {
				transform: rotate(-360deg);
			transform-origin: left top;
				}
				100% {
						transform: rotate(360deg);
			transform-origin: left top;	
				}
			
			}
			@keyframes run2{
				0% {
				transform: rotate(360deg);
			transform-origin: left top;
				}
				100% {
						transform: rotate(-360deg);
			transform-origin: left top;	
				}
			
			}
		

		</style>
	</head>
<body>
	<div class='container'>

		<div class='person'>

			<div class='head'></div>

			<div class='part_arm_one'></div>

			<div class='part_arm_two'></div>

			<div class='torso'></div>

			<div class='part_leg_one'></div>

			<div class='part_leg_two'></div>

		</div>

	</div>
	</body>
</html>
